<template>
	<view class="page-wrap">
		<mescroll-body :sticky="true" ref="mescrollRef" @init="mescrollInit" @down="downCallback" :up="up" @up="upCallback">
			<view class="sticky-tabs">
				<view class="header-search-wrpa">
					<view class="header-box">
						<view class="search-box">
							<uni-easyinput style="background: none;" class="form-input" :inputBorder="false"
								primaryColor="#C2C2C2" trim="all" v-model="search" placeholder="清输代码/名称/简称"
								placeholderStyle="font-size: 28rpx;"></uni-easyinput>
							<view class="header-but">
								搜索
							</view>
						</view>
						<view class="table-tab">
							<view class="table-tab-item" @click="switchTab(i)" :class="{'active': tabIndex === i}"
								v-for="(item, i) in tableTab" :key="i">
								{{item.table}}
							</view>
						</view>
					</view>
				</view>
			</view>
			
			
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				search: '',
				tabIndex: 0,
				tableTab: [{
					table: '结算单',
				}, {
					table: '持仓汇总',
				}, {
					table: '成交记录',
				}, {
					table: '平仓明细',
				}, {
					table: '持仓明细',
				}],
				up: {
					empty: {
						icon: '/static/transaction//null.png',
						tip: '',
					}
				}
			};
		},
		methods: {
			// 切换收益范围
			switchTab(i) {
				this.tabIndex = i
			},
			
			/*下拉刷新的回调 */
			downCallback() {
				// 这里加载你想下拉刷新的数据, 比如刷新轮播数据
				// loadSwiper();
				// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
				this.mescroll.resetUpScroll()
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				// this.mescroll.optUp.use = false
				
				return this.mescroll.endSuccess(0)
				let keyword = this.tabs[this.tabIndex]
				apiGoods(page.num, page.size, keyword).then(res=>{
					if(page.num == 1) this.goods = []; //如果是第一页需手动制空列表
					this.goods=this.goods.concat(res.list); //追加新数据
					this.mescroll.endSuccess(res.list.length); // 隐藏加载状态栏
				}).catch(()=>{
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F4F5F7;
	}
	/*
	sticky生效条件：
	1、父元素不能overflow:hidden或者overflow:auto属性。(mescroll-body设置:sticky="true"即可, mescroll-uni本身没有设置overflow)
	2、必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
	3、父元素的高度不能低于sticky元素的高度
	4、sticky元素仅在其父元素内生效,所以父元素必须是 mescroll
	*/
	.sticky-tabs{
		z-index: 990;
		position: sticky;
		top: var(--window-top);
		background-color: #fff;
	}
	
	// 使用mescroll-uni,则top为0
	.mescroll-uni,
	/deep/.mescroll-uni{
		.sticky-tabs{
			top: 0;
		}
	}

	.header-search-wrpa {
		background-color: #fff;
		border-top: 2rpx solid #F6F7F9;
		position: relative;
		z-index: 2;

		.header-box {
			padding: 24rpx;
			padding-bottom: 0;

			.search-box {
				display: flex;
				justify-content: space-around;
				align-items: center;
				width: 702rpx;
				height: 72rpx;
				background: #F4F5F7;
				border-radius: 36rpx;
				margin: 0 auto;

				.form-input {
					background: #F4F5F7;
				}

				& /deep/ .uni-easyinput__content {
					background: none !important;
				}

				.header-but {
					width: 104rpx;
					height: 72rpx;
					background: #EE5953;
					border-radius: 36rpx;
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 72rpx;
					text-align: center;
				}
			}
		}

		.table-tab {
			margin-top: 10rpx;
			height: 88rpx;
			padding: 24rpx 0;
			display: flex;
			justify-content: space-between;
			box-sizing: border-box;
			background-color: #fff;

			.table-tab-item {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #000;
				position: relative;

				&.active {
					color: #EE5953;
				}

				&.active::after {
					content: '';
					display: block;
					width: 48rpx;
					height: 8rpx;
					background: #EE5953;
					border-radius: 4rpx;
					position: absolute;
					bottom: -24rpx;
					left: 50%;
					transform: translateX(-50%);
				}
			}
		}

	}
</style>